<template>
  <div class="reward">
    <mt-header :title="list.memberName">
      <router-link to="/user-cumulation" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="reward-info">
      <mt-cell class="border-bottom" title="订单" :value="list.sn"></mt-cell>
      <mt-cell class="border-bottom" title="用户" :value="list.memberName"></mt-cell>
      <mt-cell class="border-bottom" title="订单金额" :value="'￥'+list.totalPrice"></mt-cell>
      <mt-cell v-show="list.type" class="border-bottom" title="下单类型" :value="list.type"></mt-cell>
      <mt-cell v-show="list.balance" class="border-bottom" title="返利" :value="'￥'+list.balance"></mt-cell>
      <mt-cell v-show="list.point" class="border-bottom" title="积分" :value="list.point"></mt-cell>
      <mt-cell class="border-bottom" title="下单时间" :value="list.createDate"></mt-cell>
      <mt-cell v-for="(item, index) of list.array" :key="index" class="border-bottom" :title="item.name" :label="'￥'+item.price+' X '+item.quantity" >
        <img :src="item.img" height="100">
      </mt-cell>
    </div>
  <public-menu></public-menu>
  </div>
</template>

<script>
import axios from 'axios'
import PublicMenu from '../public/Menu'
export default {
  name: 'Yxitem',
  data () {
    return {
      list: []
    }
  },
  components: {
    PublicMenu
  },
  methods: {
    getInfo () {
      axios.get('/meimai/interface/member/getOrderDetail', {
        params: {
          'memberId': this.$store.state.userId,
          'id': this.$route.query.id
        }
      }).then((res) => {
        let datas = res.data
        console.log(datas)
        if (datas.code === 0 && datas.data) {
          this.list = datas.data
        }
      })
    }
  },
  watch: {
    selected () {
      this.getInfo()
    }
  },
  mounted () {
    this.getInfo()
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
@import '~styles/varibles.styl'
.mint-navbar .mint-tab-item.is-selected
  color: #ec2935
.mint-tab-item
  color: #ccc
.mint-navbar .mint-tab-item.is-selected
  border-bottom: 3px solid #ec2935;
.mint-header
  background: #ec2935
.reward-info
  position: absolute
  top: .8rem
  bottom: .98rem
  width: 100%
  background: $eee
  .reward-table
    width: 100%
    text-align: center
    background: #fff
    th
      background: #fff
      padding: .3rem 0
    td
      padding: .36rem 0
  .not-reward
    text-align: center
    color: $cologray
    margin-top: .3rem
</style>
